<template>
  <div class="wrapper">

    <div class="panel">
      <el-menu :default-active="activeIndex" mode="horizontal" :ellipsis="false" @select="handleSelect" >
        <el-menu-item index="1" style="margin:0px auto;">按组织</el-menu-item>
        <el-menu-item index="2" style="margin:0px auto;">按员工</el-menu-item>
        <!--        <el-menu-item index="3">按岗位</el-menu-item>-->
      </el-menu>

      <div class="body">
        <el-input :suffix-icon="Search" v-model="input" :size="'small'" placeholder="请输入...">
        </el-input>

        <div class="contentL">
          <!-- 按组织 -->
          <div v-if="activeIndex === '1'">
            <el-tree v-if="!inputResult" 
              ref="leftTree"  
              :data="leftData.orgList" 
              :props="defaultProps" 
              show-checkbox
              node-key="orgId"  
              check-strictly 
              lazy
              accordion 
              indent=5
              class="showtree"
              @node-click="getChildren" 
              >
              <template  #default="{node}" >
                  <span class="treeIcon" :title=node.label >
                    {{ node.label }}
                  </span>
              </template>
            </el-tree>
            <div v-loading="orgLoading&&inputResult">
              <el-checkbox-group v-model="leftCheckedData.orgList" v-if="inputResult">
                <el-checkbox v-for="data in orgList" :key="data.orgCode" :label="data">
                  <span :title="data.orgName">{{ data.orgName }}</span>
                </el-checkbox>
              </el-checkbox-group>
              <div v-if="inputResult && orgList.length==0">
                <div style="height: 100%;width: 100%;margin: 38%;font-size: large;color: #9a9a9a;">暂无数据</div>
              </div>
            </div>
          </div>

          <!-- 按员工 -->
          <div v-if="activeIndex === '2'">
            <el-checkbox-group v-model="leftCheckedData.staffList" v-if="!inputResult">
              <el-checkbox v-for="data in leftData.staffList" :key="data.staffAccount" :label="data">
                {{ data.staffName }} ({{ data.staffAccount }})
              </el-checkbox>
            </el-checkbox-group>
            <div v-loading="staffLoading&&inputResult">
              <el-checkbox-group v-model="leftCheckedData.staffList" v-if="inputResult">
                <el-checkbox v-for="data in staffAccountList" :key="data.staffAccount" :label="data">
                  {{ data.staffName }} ({{ data.staffAccount }})
                </el-checkbox>
              </el-checkbox-group>
              <div v-if="inputResult && staffAccountList.length == 0">
                <div style="height: 100%;width: 100%;margin: 38%;font-size: large;color: #9a9a9a;">暂无数据</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- <div class="btnList">
      <el-button @click="handleSRMove" :disabled="SRDisabled" @mouseover="SR">&gt;</el-button>
      <el-button @click="handleSLMove" :disabled="SLDisabled" @mouseover="SL">&lt;</el-button>
      <el-button @click="handleMRMove" :disabled="MRDisabled" @mouseover="MR">&gt;&gt;</el-button>
      <el-button @click="handleMLMove" :disabled="MLDisabled" @mouseover="ML">&lt;&lt;</el-button>
    </div> -->
    <div class="btnList">
      <!-- <el-button @click="handleNRMove" :disabled="NRDisabled" @mouseover="NR">&gt;</el-button>
      <el-button @click="handleNLMove" :disabled="NLDisabled" @mouseover="NL">&lt;</el-button> -->
      <el-button @click="handleNRMove"  @mouseover="NR">&gt;</el-button>
      <el-button @click="handleNLMove"  @mouseover="NL">&lt;</el-button>
      <el-button @click="handleARMove">&gt;&gt;</el-button>
      <el-button @click="handleALMove">&lt;&lt;</el-button>
    </div>

    <div class="panel">

      <el-menu mode="horizontal">
        <el-menu-item index="1" style="margin:0px auto;padding: 5px auto;">{{ activeIndex == '1' ? '已选组织' : '已选用户' }}</el-menu-item>
      </el-menu>

      <div class="body">
        <div class="contentR">
          <!-- 按组织 -->
          <div v-if="activeIndex === '1'">
            <el-checkbox-group v-model="rightCheckedData.orgList">
              <el-checkbox v-for="data in rightData.orgList" :key="data.orgId" :label="data">
                <span class="treeIcon" :title=data.orgName >
                  {{ data.orgName }}
                  </span>
                
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <!-- 按员工 -->
          <div v-if="activeIndex === '2'">
            <el-checkbox-group v-model="rightCheckedData.staffList">
              <el-checkbox v-for="data in rightData.staffList" :key="data.staffAccount" :label="data">
                {{ data.staffName }} ({{ data.staffAccount }})
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, defineProps, onMounted, ref, watch } from "vue";
import { Search } from '@element-plus/icons-vue'
import { ElTree } from "element-plus";
import sceneApi from "@/api/scene";
import { makeTree } from "@/common/util";
import { json } from "stream/consumers";


const props = defineProps(['leftData', 'rightData', 'leftOrgList'])

const input = ref('')
const orgList = ref([])
const staffAccountList = ref([])
const inputResult = ref(false)
//遮罩
const orgLoading = ref(false)
const staffLoading = ref(false)
// const orgLoading = ref(false)



let timer;
// 监听输入框是否有数值 
watch(input, (newValue) => {
  if(activeIndex.value == '1' ){
    orgLoading.value = true
  }else{
    staffLoading.value = true
  }
  // orgLoading.value =true
  inputResult.value = true;
  clearTimeout(timer);
  timer = setTimeout(() => {
    staffAccountList.value = []
    if (!!newValue) {
      // 当 input 有内容时，inputResult 为 true 
      if(activeIndex.value == '1' ){
        // orgLoading.value = true
        // orgList.value = []
        sceneApi.querySceneAuthOrgListSelect(input.value).then(res => {
        orgList.value = res.data.data
        orgLoading.value = false;
      })
      }else {
        // staffLoading.value = true
        filterStaffAccount(props.leftData.staffList)
        staffLoading.value = false
      }
    } else {
      props.leftData.value=props.leftData.value
      inputResult.value = false;
      // 刷新
      sceneApi.querySceneAuthOrgList("").then(res => {
        props.leftData.orgList = makeTree("orgId","relaOrgId",res.data.data.orgList)
      })
    }
  }, 1000);

});


// 筛选人员
const filterStaffAccount = (staffList: Array<Object>) => {
  for (let index = 0; index < staffList.length; index++) {
    if (staffList[index].staffAccount!.includes(input.value) || staffList[index].staffName!.includes(input.value)) {
      staffAccountList.value.push(staffList[index])
    }
  }
}

//监听传过来的数据
// watch(()=>props.rightData,()=>{
//   leftCheckedData.value.staffList = props.rightData.staffList
//   leftCheckedData.value.orgList = props.rightData.orgList
//   leftTree.value!.setCheckedNodes(leftCheckedData.value.orgList)
// })


// 穿梭框菜单
const activeIndex = ref('1')
const handleSelect = (key: string) => {
  // 点击切换清空数据
  staffAccountList.value=[]
  orgList.value =[]
  input.value =""
  activeIndex.value = key
  
  // 懒加载刷新
  sceneApi.querySceneAuthOrgList("").then(res => {
    props.leftData.orgList = makeTree("orgId","relaOrgId",res.data.data.orgList)
  })
  // if (key === '1') {
  //   leftTree.value!.setCheckedNodes(leftCheckedData.value.orgList)
  // }
}

// 多选框
const leftCheckedData = ref({ orgList: [], staffList: [] })
const rightCheckedData = ref({ orgList: [], staffList: [] })

// 树形控件
const leftTree = ref<InstanceType<typeof ElTree>>();

const defaultProps = {
  children: 'children',
  label: 'orgName',
  isLeaf: 'leaf',
}
const lastNode = ref(1)
// 点击节点-获取子节点
const getChildren = (node) => {
  if (!node.children) {
    sceneApi.querySceneAuthOrgList(node.orgId).then(res => {
      for (let i in res.data.data.orgList) {
        if (!res.data.data.orgList[i].children && res.data.data.orgList[i].orgName != "") {
          let isDuplicate = props.leftOrgList.some(data => {
            return res.data.data.orgList[i].orgCode == JSON.parse(JSON.stringify(data)).orgCode
          })
          if (!isDuplicate) {
            props.leftOrgList.push(res.data.data.orgList[i])
          }
        }
      }
      props.leftOrgList.value = Array.from(new Set(props.leftOrgList.value))
      node.children = res.data.data.orgList
    })
  }
}



// // 单个右移
// const SRDisabled = ref(true)
// const SR = () => {
//   if (activeIndex.value === '2') {
//     SRDisabled.value = leftCheckedData.value.staffList.length !== 1
//     } else {
//     SRDisabled.value = leftTree.value!.getCheckedNodes().length !== 1
//   }
// }
// // 单个左移
// const SLDisabled = ref(true)
// const SL = () => {
//   if (activeIndex.value === '2') {
//     SLDisabled.value = rightCheckedData.value.staffList.length !== 1
//   } else {
//     SLDisabled.value = rightCheckedData.value.orgList.length !== 1
//   }
// }
// // 批量右移
// const MRDisabled = ref(true)
// const MR = () => {
//   if (activeIndex.value === '2') {
//     MRDisabled.value = leftCheckedData.value.staffList.length < 2
//   } else {
//     MRDisabled.value = leftTree.value!.getCheckedNodes().length < 2
//   }
// }
// // 批量左移
// const MLDisabled = ref(true)
// const ML = () => {
//   if (activeIndex.value === '2') {
//     MLDisabled.value = rightCheckedData.value.staffList.length < 2
//   } else {
//     MLDisabled.value = rightCheckedData.value.orgList.length < 2
//   }
// }
// 单个右移
// const handleSRMove = () => {
//   // 组织
//   if (activeIndex.value === '1') {
//     // 获取左框选中数据
//     leftCheckedData.value.orgList = leftTree.value!.getCheckedNodes()
//     // 右框添加数据
//     console.log(leftTree.value!.getCheckedNodes())
//     props.rightData.orgList.push(leftCheckedData.value.orgList[0])
//     props.rightData.orgList = Array.from(new Set(props.rightData.orgList));
//     // 左框勾选
//     leftTree.value!.setCheckedNodes(leftCheckedData.value.orgList)
//   }
//   // 员工
//   if (activeIndex.value === '2') {
//     // 右框添加数据
//     props.rightData.staffList.push(leftCheckedData.value.staffList[0])
//     props.rightData.staffList = Array.from(new Set(props.rightData.staffList));
//   }
// }
// // 单个左移
// const handleSLMove = () => {
//   // 组织
//   if (activeIndex.value === '1') {
//     // 左框取消勾选
//     leftTree.value!.setChecked(rightCheckedData.value.orgList[0], false, false)
//     // 右框移除数据
//     const index = props.rightData.orgList.findIndex( item => {return item === rightCheckedData.value.orgList[0]})
//     props.rightData.orgList.splice(index,1)
//     // 右框已选数据清空
//     rightCheckedData.value.orgList = []
//   }
//   // 员工
//   if (activeIndex.value === '2') {
//     // 左框添加数据
//     let index = leftCheckedData.value.staffList.findIndex( item => {return item === rightCheckedData.value.staffList[0]})
//     leftCheckedData.value.staffList.splice(index,1)
//     // 右框移除数据
//     index = props.rightData.staffList.findIndex( item => {return item === rightCheckedData.value.staffList[0]})
//     props.rightData.staffList.splice(index,1)
//     // 右框已选数据清空
//     rightCheckedData.value.staffList = []
//   }
// }
// // 批量右移
// const handleMRMove = () => {
//   // 组织
//   if (activeIndex.value === '1') {
//     // 获取左框选中数据
//     leftCheckedData.value.orgList = leftTree.value!.getCheckedNodes()
//     for (let i in leftCheckedData.value.orgList) {
//       // 右框添加数据
//       props.rightData.orgList.push(leftCheckedData.value.orgList[i])
//     }
//     props.rightData.orgList = Array.from(new Set(props.rightData.orgList));

//     // 左框勾选
//     leftTree.value!.setCheckedNodes(leftCheckedData.value.orgList)
//     props.rightData.staffList = Array.from(new Set(props.rightData.staffList));

//   }
//   // 员工
//   if (activeIndex.value === '2') {
//     for (let i in leftCheckedData.value.staffList) {
//       // 右框添加数据
//       props.rightData.staffList.push(leftCheckedData.value.staffList[i])
//     }
//     // 去重
//     props.rightData.staffList = Array.from(new Set(props.rightData.staffList));
//   }
// }
// // 批量左移
// const handleMLMove = () => {
//   // 组织
//   if (activeIndex.value === '1') {
//     for (let i in rightCheckedData.value.orgList) {
//       // 右框移除数据
//       const index = props.rightData.orgList.findIndex( item => {return item === rightCheckedData.value.orgList[i]})
//       props.rightData.orgList.splice(index,1)
//       // 左框取消勾选
//       leftTree.value!.setChecked(rightCheckedData.value.orgList[i], false, false)
//     }
//     // 右框已选数据清空
//     rightCheckedData.value.orgList = []
//   }
//   // 员工
//   if (activeIndex.value === '2') {
//     for (let i in rightCheckedData.value.staffList) {
//       // 左框取消勾选
//       let index = leftCheckedData.value.staffList.findIndex( item => {return item === rightCheckedData.value.staffList[i]})
//       leftCheckedData.value.staffList.splice(index,1)
//       // 右框移除数据
//       index = props.rightData.staffList.findIndex( item => {return item === rightCheckedData.value.staffList[i]})
//       props.rightData.staffList.splice(index,1)
//     }
//     // 右框已选数据清空
//     rightCheckedData.value.staffList = []
//   }
// }

// 右移
const NRDisabled = ref(true)
const NR = () => {
  // 人员
  if (activeIndex.value === '2') {
    NRDisabled.value = leftCheckedData.value.staffList.length === 0 ? true : false;
    // NRDisabled.value = leftCheckedData.value.staffList.length == 0
  // 部门
  } else {
    if (!inputResult.value) {
      NRDisabled.value = leftTree.value!.getCheckedNodes().length === 0 ? true : false;
      // NRDisabled.value = leftTree.value!.getCheckedNodes().length == 0
    } else {
      NRDisabled.value = leftCheckedData.value.orgList.length === 0 ? true : false;
      // NRDisabled.value = leftCheckedData.value.orgList.length == 0
    }
  }
}
// 左移
const NLDisabled = ref(true)
const NL = () => {
  if (activeIndex.value === '2') {
    NLDisabled.value = rightCheckedData.value.staffList.length == 0
  } else {
    NLDisabled.value = rightCheckedData.value.orgList.length == 0
  }
}
let index = 0

// 右移
const handleNRMove = () => {
  // 组织
  if (activeIndex.value === '1') {
    if (!inputResult.value) {
      // 右框添加数据
      for (let i in leftTree.value!.getCheckedNodes()) {
        let isDuplicate = props.rightData.orgList.some(data => {
          return leftTree.value!.getCheckedNodes()[i].orgCode == JSON.parse(JSON.stringify(data)).orgCode
        })
        if (!isDuplicate) { // 如果不重复则加入到数组中 
          props.rightData.orgList.push(leftTree.value!.getCheckedNodes()[i])
        }

      }
    } else {
      leftCheckedData.value.orgList.forEach(item => {
        // 判断是否在右边已存在staffAccount
        let isDuplicate = props.rightData.orgList.some(data => {
          return JSON.parse(JSON.stringify(item)).orgCode == JSON.parse(JSON.stringify(data)).orgCode
        })
        if (!isDuplicate) { // 如果不重复则加入到数组中 
          props.rightData.orgList.push(item)
        }
      })
    }
    props.rightData.orgList = Array.from(new Set(props.rightData.orgList));
  }
  // 员工
  if (activeIndex.value === '2') {
    // 右框添加数据
    leftCheckedData.value.staffList.forEach(item => {
      // 判断是否在右边已存在staffAccount
      let isDuplicate = props.rightData.staffList.some(data => {
        return JSON.parse(JSON.stringify(item)).staffAccount == JSON.parse(JSON.stringify(data)).staffAccount
      })
      if (!isDuplicate) { // 如果不重复则加入到数组中 
        props.rightData.staffList.push(item)
      }
    })
    props.rightData.staffList = Array.from(new Set(props.rightData.staffList));
  }
}
// 左移
const handleNLMove = () => {
  // 组织
  if (activeIndex.value === '1') {
    // 右框移除数据
    for (let i in rightCheckedData.value.orgList) {
      index = props.rightData.orgList.findIndex(item => { return item === rightCheckedData.value.orgList[i] })
      props.rightData.orgList.splice(index, 1)
    }
  }
  // 员工
  if (activeIndex.value === '2') {
    // 右框移除数据
    for (let i in rightCheckedData.value.staffList) {
      const index = props.rightData.staffList.findIndex(item => { return item === rightCheckedData.value.staffList[i] })
      props.rightData.staffList.splice(index, 1)
    }
  }
  rightCheckedData.value = { orgList: [], staffList: [] }
}
// 全部右移
const handleARMove = () => {
  // 组织
  if (activeIndex.value === '1') {
    if (!inputResult.value) {
      props.rightData.orgList = []
      props.rightData.orgList = props.leftOrgList
      props.rightData.orgList = Array.from(new Set(props.rightData.orgList));
    } else {
      props.rightData.orgList = []
      props.rightData.orgList = orgList.value
      props.rightData.orgList = Array.from(new Set(orgList.value));
    }

  }

  // 员工
  if (activeIndex.value === '2') {
    props.rightData.staffList = []
    if (!inputResult.value) {
      for (let i in props.leftData.staffList) {
        props.rightData.staffList.push(props.leftData.staffList[i])
      }
    } else {
      for (let i in staffAccountList.value) {
        props.rightData.staffList.push(staffAccountList.value[i])
      }
    }

    props.rightData.staffList = Array.from(new Set(props.rightData.staffList));
  }
}
// 全部左移
const handleALMove = () => {
  // 组织
  if (activeIndex.value === '1') {
    props.rightData.orgList = []
  }
  // 员工
  if (activeIndex.value === '2') {
    props.rightData.staffList = []
  }
  rightCheckedData.value = { orgList: [], staffList: [] }
}




</script>

<style scoped>
.panel {
  width: 4.1rem;
  height: 6rem;
  border: 2px solid #F2F3F5;
  border-radius: 0.1rem;
  float: left;
}

.btnList {
  height: 5rem;
  padding: 1rem 0;
  float: left;
}

.btnList .el-button {
  display: block;
  width: 0.9rem;
  height: 0.4rem;
  text-align: center;
  margin: 0.1rem 0.3rem;
  background: #EAF4FF;
  color: #5DA7FF;
}

.btnList .el-button:hover {
  background: #4FA5FE;
  color: #F9F9F9;
}

.panel .el-menu {
  background: #F9F9F9;
}

.el-menu .el-menu-item {
  width: 1.5rem;
  height: 0.5rem;
  padding: 0 0.2rem;
  margin: 0.1rem auto;
  justify-content: center;
}

.body {
  padding: 0.13rem;
}

.contentL {
  width: 3.8rem;
  height: 4.7rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.contentR {
  width: 100%;
  height: 5.2rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.treeIcon{
  position:relative;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}


.el-input {
  width: 3.8rem;
  margin-bottom: 0.15rem;
}

.el-checkbox-group {
  padding: 0 0.2rem;
}

.el-checkbox {
  display: block;
  height: 0.5rem;
  line-height: 0.5rem;
  margin: 0;
  border-bottom: 1px solid #E9E9E9;
}
</style>
